<script>
    import SelectCharacter from "../lib/components/BootIndex/SelectCharacter.svelte";

    let  body_image = "liyue.png";

    function set_body(imagename){
        body_image =  imagename + ".png";
    }

</script>

<div>
    <div>
        <img src="/src/lib/images/banner.png" alt="" class="banner">
    </div>

    <h1>势力介绍</h1>
    <div class="detail">
        <div class="chara-detail">
            <div class="img-box img-box-liyue" style="{`background-image: url('/src/lib/images/${body_image}');`}">

            </div>
        </div>
        <div class="chara-selects">
            <div on:click={()=>{set_body('liyue')}}>
                <SelectCharacter imageSrc="/src/lib/images/tliyue.png" />
            </div>

            <div on:click={()=>{set_body('xumi')}}>
                <SelectCharacter imageSrc="/src/lib/images/txumi.png" />
            </div>
            <SelectCharacter imageSrc="/src/lib/images/tliyue.png"/>
        </div>
    </div>
</div>


<style lang="less">
    .banner{
        width: 100%;
        height: 25vw;
        object-fit: cover;
    }

    .detail{
      width: 50%;
      margin: auto;
      padding: 30px;
      box-sizing: border-box;
      height: 1000px;
      .chara-selects{
            float: right;
        }

      .img-box{
        float: left;
        width: 70%;

        // AI: 让背景展示全部图片的尺寸
        height: 569px;
        background-size: contain;
        background-repeat: no-repeat;
        object-fit: cover;
        object-position: center;

      }
    }
</style>